<template>
  <s-layout :tabbarshow="false" id="layout" navbar="normal" title="新增上交合同" :autoBack="true" leftIconColor="#ffffff" :bgColor="'rgba(0,0,0,0)'" :titleStyle="{  color:'#fff',fontSize:'32rpx' }">

  <view class="container" :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/staff_project_arrange.png)`,paddingTop:(safeAreaInsets?.top + 44) + 'px'}">
      <!-- 表单盒子 -->
      <view class="form_box area">
          <!-- 表单结构 -->
          <fui-form ref="form" top="0" :model="FormData" :show="false">
            <fui-form-item :bottomBorder="false" :asterisk="true" label="合同名称" prop="title">
              <fui-input :borderBottom="false" :padding="[0]" placeholder="请输入合同名称" v-model="FormData.title"></fui-input>
            </fui-form-item>
            <fui-form-item :bottomBorder="false" :asterisk="true" label="甲方名称" prop="first_party">
              <fui-input :borderBottom="false" :padding="[0]" placeholder="请输入甲方名称" v-model="FormData.first_party"></fui-input>
            </fui-form-item>
            <fui-form-item :bottomBorder="false" :asterisk="true" label="乙方名称" prop="second_party">
              <fui-input :borderBottom="false" :padding="[0]" placeholder="请输入乙方名称" v-model="FormData.second_party"></fui-input>
            </fui-form-item>
            <fui-form-item :bottomBorder="false" :asterisk="true" label="起止日期" prop="start_date">
              <fui-input :disabled="true" @tap="timeClick" :borderBottom="false" :padding="[0]" placeholder="请选择起止日期" v-model="Select_time"></fui-input>
            </fui-form-item>
            <!-- 上传封面 -->
            <view class="form_images">
              <fui-form-item :bottomBorder="false" :asterisk="true" label="上传封面" prop="images">
              </fui-form-item>
              <view class="upload_box">
                  <u-upload :fileList="state.fileList1" @afterRead="imageUpload" @delete="deletePic" name="10"
                      :multiple="true" :maxCount="10">
                  </u-upload>
              </view>
            </view>
          </fui-form>
      </view>
  </view>
</s-layout>

  <!-- 底部提交按钮 -->
  <view>
    <s-button @netWork="submitForm" :text="text"></s-button>
  </view>
  <fui-date-picker range :value="currentDate" :show="time_show" type="3" @change="time_change" @cancel="time_cancel"></fui-date-picker>
</template>

<script setup>
  import sheep from '@/sheep';
    import { ref, reactive, unref } from 'vue';
    import { onLoad } from '@dcloudio/uni-app';
    import { baseUrl } from "@/sheep/config";
    import { realName, identityCard, contactWay,bankName,bankCode,bank_branch,payment_type } from '@/sheep/validate/form';
    const { safeAreaInsets } = uni.getSystemInfoSync();
    const text = ref("提交");
    const FormData = ref({
      title:'',
      first_party:'',
      second_party:'',
      start_date:'',
      end_date:'',
      images:''
    })

    const rules = [
    {
      name: "title",
      rule: ["required"],
      msg: ["请输入合同名称"]
    },
    {
      name: "first_party",
      rule: ["required"],
      msg: ["请输入甲方名称"]
    },
    {
      name: "second_party",
      rule: ["required"],
      msg: ["请输入乙方名称"]
    },
    {
      name: "start_date",
      rule: ["required"],
      msg: ["请选择起止日期"]
    },
    {
      name: "images",
      rule: ["required"],
      msg: ["请上传封面"]
    }
  ];

  // 获取当日时间
  let today = new Date();
  let year = today.getFullYear();
  let month = today.getMonth() + 1; // 月份是从0开始计数的，所以要加1
  let day = today.getDate();
  let currentDate = year + '-' + month + '-' + day;

    const time_show = ref(false)
    const Select_time = ref('')
  // 日期区间选择
    // 点击展开日期区间选择器
    const timeClick = () => {
      time_show.value = true
    }
    // 确认选择时间
    const time_change = (e) => {
      Select_time.value = `${e.startDate.result} - ${e.endDate.result}`
      FormData.value.start_date = e.startDate.result
      FormData.value.end_date = e.endDate.result
      time_show.value = false
    }
    // 取消方法
    const time_cancel = () => {
      time_show.value = false
    }


    // 方法 上传图片
    // 上传图片逻辑
    const state = reactive({
      fileList1: []
    })
    // 删除图片
    const deletePic = (event) => {
      state.fileList1.splice(event.index, 1);
      postData.value.splice(event.index, 1)
    };

    // 新增图片
    const imageUpload = async (event) => {
      let lists = [].concat(event.file);
      let fileListLen = state.fileList1.length;
      lists.map((item) => {
        state.fileList1.push({
          ...item,
          status: 'uploading',
          message: '上传中',
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const url = await uploadFilePromise(lists[i].url)
        let item = state.fileList1[fileListLen];
        state.fileList1.splice(fileListLen, 1, {
          ...item,
          status: 'success',
          message: '',
          url: sheep.$url.cdn(url),
        });
        fileListLen++;
      }
    };
    const postData = ref([])
    async function uploadFilePromise(tempUrl) {
      let { url } = await sheep.$api.app.upload(tempUrl, 'ugc');
      postData.value.push(url);
      return url;
    };

    const form = ref()
    // 提交上交合同
    const submitForm = () => {
      FormData.value.images = postData.value.join(',') // 提交将图片的值塞进FormData中
      form.value.validator(FormData.value, rules,true).then(async res => {
        if(res.isPassed) {
          const resust = await sheep.$api.turn_in_contract.contract_submitAdd(FormData.value);
            if(resust.code == 1){
              sheep.$helper.toast(resust.msg);
              setTimeout(function() {
                sheep.$router.back(true)
              }, 500);
            } else {
              sheep.$helper.toast(resust.msg);
            }
        }
        
      }).catch(err => {
        console.log(err)
      })
    }

</script>

<style scoped lang="scss">
page {
  width: 100%;
  height: 100%;
}

// 版心
.area {
  width: calc(100% - 40rpx);
  margin: 0 20rpx;
}


:deep(.fui-form__item-sizing){
  font-size: 26rpx !important;
}
:deep(.fui-input__self){
  font-size: 26rpx !important;
}
// 背景图片盒子
.container {
  background-size: 100% 40%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  // 表单盒子
  .form_box {
    width: calc(100% - 100rpx);
    margin-top: 20rpx;
    border-radius: 16rpx;
    background-color: #FFFFFF;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
    padding: 30rpx 30rpx;
    :deep(.u-form-item){
        margin-bottom: 16rpx !important;
      }
      :deep(.u-form-item__body) {
        height: 80rpx;
        padding: 0 10rpx 0 30rpx;
        background-color: #F9F9F9;
        border-radius: 16rpx;
        .u-form-item__body__left{
          width: 216rpx !important;
        }
      }
      :deep(.u-form-item__body__right__content ){
        height: 80rpx !important;
      }
  }
}

:deep(.u-form-item__body__right__message ){
    text-align: right !important;
    margin-top: 10rpx;
  }

  // 图片
  .form_images {
    width: calc(100% - 80rpx);
    .upload_box {
      margin-top: 15rpx;
    }
    :deep(.container.data-v-c47f07c1 .u-upload) {
      height: 190rpx !important;
    }
    :deep(.u-upload__button.data-v-cafe0b2a) {
      margin: 0;
    }
  } 
</style>